import { useState, useRef } from "react";
import { Upload, Button, message, Image } from "antd";
import { UploadOutlined, DeleteOutlined } from "@ant-design/icons";

const ImageUpload = ({ onImageUpload }) => {
  const [imageUrl, setImageUrl] = useState(null);
  const [uploading, setUploading] = useState(false);
  const fileInputRef = useRef(null);

  const beforeUpload = (file) => {
    const isImage = file.type.startsWith("image/");
    if (!isImage) {
      message.error("只能上传图片文件!");
      return false;
    }

    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
      message.error("图片大小不能超过 10MB!");
      return false;
    }

    handleImageUpload(file);
    return false; // 阻止自动上传
  };

  const handleImageUpload = (file) => {
    setUploading(true);

    const reader = new FileReader();
    reader.onload = (e) => {
      const url = e.target.result;
      setImageUrl(url);
      setUploading(false);

      // 通知父组件
      onImageUpload(file, url);
      message.success("图片上传成功!");
    };
    reader.onerror = () => {
      setUploading(false);
      message.error("图片读取失败!");
    };
    reader.readAsDataURL(file);
  };

  const handleRemoveImage = () => {
    setImageUrl(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();

    const files = Array.from(e.dataTransfer.files);
    const imageFile = files.find((file) => file.type.startsWith("image/"));

    if (imageFile) {
      const isLt10M = imageFile.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        message.error("图片大小不能超过 10MB!");
        return;
      }
      handleImageUpload(imageFile);
    } else {
      message.error("请拖拽图片文件!");
    }
  };

  const handleDragOver = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  return (
    <div>
      {!imageUrl ? (
        <Upload
          beforeUpload={beforeUpload}
          showUploadList={false}
          accept="image/*"
        >
          <div
            className="upload-area"
            onDrop={handleDrop}
            onDragOver={handleDragOver}
          >
            <UploadOutlined
              style={{ fontSize: 48, color: "#d9d9d9", marginBottom: 16 }}
            />
            <div style={{ marginBottom: 8 }}>点击或拖拽图片到此区域上传</div>
            <div style={{ fontSize: 12, color: "#999" }}>
              支持 JPG、PNG、GIF 格式，文件大小不超过 10MB
            </div>
          </div>
        </Upload>
      ) : (
        <div>
          <div style={{ marginBottom: 16 }}>
            <Button
              type="primary"
              danger
              icon={<DeleteOutlined />}
              onClick={handleRemoveImage}
              size="small"
            >
              删除图片
            </Button>
          </div>
          <Image
            src={imageUrl}
            alt="上传的图片"
            className="image-preview"
            style={{ width: "100%" }}
            preview={true}
          />
        </div>
      )}
    </div>
  );
};

export default ImageUpload;
